<template>
	<view class="recy">
		<nt-container>
			<view class="nt-submit">
				<view class="nt-submit-item">
					<nt-order-detail :orderInfo="orderInfo"></nt-order-detail>
				</view>
				<view class="nt-submit-item border pad_lr">
					<nt-title label="带回配件">
						<template #right>
							<span class="clear-btn" @tap="showClearTip = true">清空</span>
							<view class="switch">
								<view class="switch-text" :class="{ active: !isBack }">无</view>
								<u-switch v-model="isBack" size="20"></u-switch>
								<view class="switch-text" :class="{ active: isBack }">有</view>
							</view>
						</template>
					</nt-title>
				</view>
				<view class="back-list" v-if="isBack">
					<view class="back-list__item">
						<view class="back-list__item--type weight">配件类型</view>
						<view class="back-list__item--name weight">配件名称</view>
						<view class="back-list__item--number weight">配件数量</view>
						<view class="back-list__item--price weight">配件金额</view>
						<view class="back-list__item--btn weight"></view>
					</view>
					<view class="back-list__item" v-for="(it, index) in backPartsList" :key="index">
						<view class="back-list__item--type" @tap="selectBackParts(index)">
							{{ it.name || "请选择" }} <text class="iconfont">&#xe6bb;</text>
						</view>
						<view class="back-list__item--name">
							<!-- {{ it.customName || "名称" }} -->
							<u--input v-model="it.customName" placeholder="名称" inputAlign="center"></u--input>
						</view>
						<view class="back-list__item--number">
							<u--input v-model="it.quantity" placeholder="数量" inputAlign="center"></u--input>
						</view>
						<view class="back-list__item--price">
							<u--input v-model="it.price" placeholder="价格" @input="numberInput($event,it)"
								inputAlign="center"></u--input>
						</view>
						<view class="back-list__item--btn">
							<view class="back-list__item--btn-b" @tap="addBackParts(index)" v-if="index == 0">+</view>
							<view class="back-list__item--btn-r" @tap="deleteBackParts(index)" v-else>-</view>
						</view>
					</view>
				</view>
				<view class="nt-submit-item border pad_lr">
					<nt-title label="上传回收图片">
						<!-- <template #right>
							<view class="switch">
								<view class="switch-text" :class="{ active: !isAdv }">无</view>
									<u-switch v-model="isAdv" size="20" ></u-switch>
								<view class="switch-text" :class="{ active: isAdv }">有</view>
							</view>
						</template> -->
					</nt-title>
					<template>
						<nt-upload @success="ggUpload" :maxCount="9" :images="echoAdvImage"></nt-upload>
					</template>
				</view>
				<view class="nt-submit-footer">
					<view class="money">
						利润：<text style="color: red;">￥{{computeProfit}}</text>
					</view> <nt-button text="录入信息" @click="submit"></nt-button>
				</view>
			</view>
		</nt-container>
		<u-picker :show="showBackParts" ref="backPartsRef" :columns="[formConfig.takebackTypeList]" keyName="name"
			@confirm="confrimBackParts" @close="showBackParts = false" @cancel="showBackParts = false"
			closeOnClickOverlay></u-picker>
		<u-modal :show="showClearTip" title="操作提示" content='确定清空录入的收回配件吗' showCancelButton
			@cancel="showClearTip = false" @confirm="clearBackParts"></u-modal>
	</view>
</template>

<script>
	import Mixins from "../submit/mixins"
	import {
		postTakeback
	} from "@/api"
	export default {
		computed: {
			computeProfit() {
				let total = -this.backPartsList.reduce((r, c) => r += Number(c.price), 0)
				return total
			}
		},
		mixins: [Mixins],
		onLoad(options) {
			this.orderId = options.id ?? 220519
			this.init()
		},
		methods: {
			async submit() {
				const formData = this.formatParams()
				formData.takeback_parts_images = this.advImage.map((o => o.url ?? o))
				let {
					code,
					msg
				} = await postTakeback(formData)
				if (code === 1) {
					this.toast(msg)
					setTimeout(() => {
						this.back()
					}, 1000)
				}
			},
			async numberInput(e, it) {
				await this.$nextTick()
				it.price = e.replace(/^\D*(^\d{0,10}).*$/g, "$1");
			},
			onRequestd(data) {
				this.echoAdvImage = data?.takeback_images
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "../submit/submit.scss";

	/deep/.nt-card {
		// margin: 0 20rpx;


	}

	::v-deep .nt-submit {
		.nt-title {
			margin: 20rpx 0;
			border-radius: 10rpx;
		}

		.nt-submit-item {
			background-color: #fff;
		}

		.back-list {
			background: #fff;
		}
	}

	.nt-submit-item__content {
		/deep/ .u-border {
			border: none;
		}

		/deep/ .u-textarea {
			background: #f9f9f9;
		}
	}

	::v-deep.nt-submit-footer {
		display: flex;
		justify-content: center;
		align-items: center;

		.money {
			width: 70%;
		}

		.button-container {
			flex: 1
		}
	}
</style>